<template>
    <div style="display: flex;justify-content: space-between">
        <h2>学生管理</h2>
        <h2><button @click="go2add()">添加学生</button></h2>
    </div>
    <div style="display: flex">
        <div style="width: 99%;border: blue 1px solid">
            <h2 style="text-align: center">学生显示</h2>
            <table border="1" style="width: 100%">
                <tr>
                    <th>编号</th>
                    <th>名字</th>
                    <th>账号</th>
                    <th>编号</th>
                    <th>教室</th>
                    <th>图片</th>
                    <th>操作</th>
                </tr>
                <tr v-for="x, idx in stus" @click="go2up(x.uid)">
                    <th>{{ x.uid }}</th>
                    <th>{{ x.uname }}</th>
                    <th>{{ x.phone }}</th>
                    <th>{{ x.clz.clzno }}</th>
                    <th>{{ x.clz.clzname }}</th>
                    <th>
                        <div style="width: 50px;height: 8vh;">
                            <img v-bind:src="$ip + `/api/public/showimg/` + x.pic" style="width: 100% ;height: 100%">
                        </div>
                    </th>
                    <th><button @click="del(x.uid)">删除</button></th>
                </tr>
            </table>

            <div style="display: flex; justify-content: center;">
                <p><button v-on:click="move(-1)">上一页</button></p>
                <p>{{ page.p }}/{{ totalPages }}</p>
                <p><button v-on:click="move(1)">下一页</button></p>
            </div>
            <!-- <div style="text-align: center;"> -->
            <!-- <button @click="pages(-1)">上一页</button>{{page.p}}/{{totalPages}}
	                <button  @click="pages(1)">下一页</button> -->
            <!-- <button @click="pages(-1)" :disabled="page.pagenum <= 0">上一页</button> -->
            <!-- <button @click="pages(1)" :disabled="page.pagenum >= totalPages">下一页</button> -->
            <!-- </div> -->
        </div>
    </div>


</template>


<script>
export default {
    data() {
        return {
            //定义学生数组
            // stus: [{ clz: { clzno: "" } }],
            stus: [],
            //定义翻页属性函数
            page: {
                //翻页行数
                pagenum: 1,
                //翻页显示行数
                lines: 6,
                //总行数
                total: 0,
                p: 1
            },
            token: "",
            dodel: ""
        }
    },
    methods: {
        go2up(uid) {//根据uid去修改
            this.$router.push({
                path: '/adm/stuadd', query: {
                    id: uid
                }
            })
        },
        go2add() {//添加
            this.$router.push({
                path: '/adm/stuadd', query: {
                    id: 0
                }

            })

        },
        del(uid) {//根据uid删除
            var that = this
            this.$axios.get(this.$ip + "/api/adm/stu/del?uid=" + uid, { headers: { 'Authorization': that.token } }).then(function (resp) {
                that.stus = resp.data.data
                console.log(resp.data.data)
            })
        },
        move(n) {
            this.page.pagenum = this.page.pagenum + n;
            if (this.page.pagenum < 1) {
                this.page.pagenum = 1;
                return;
            }
            if (this.page.pagenum > this.totalPage) {
                this.page.pagenum = this.totalPage;
                return;
            }
            var that = this;
            var b = this.$ip + "/api/adm/stu/findPage?pagenum=" + this.page.pagenum + "&lines=" + this.page.lines
            this.$axios.get(b,
            {headers:{'Authorization':that.token}})
                .then(function (resp) {
                    that.stus=resp.data.data.students
				 	that.page.total=resp.data.data.total
					that.page.p=that.page.p+n
                })
                // if(this.page.p >= this.n){
                //     this.page.p= this.n
				// }
        }


        // pages(a) { // 根据参数a判断是上一页还是下一页
        //     var that = this;
        //     var pagenum = this.page.pagenum;
        //     var lines = this.page.lines;

        //     if (a == 1) {
        //         pagenum = pagenum + lines;
        //     } else {
        //         pagenum = pagenum - lines;
        //     }

        //     // 防止 pagenum 小于 0 或大于 totalPages
        //     if (pagenum < 0) pagenum = 0;
        //     if (pagenum > this.totalPages) pagenum = this.totalPages;

        //     this.page.pagenum = pagenum;
        //     this.page.lines = lines;

        //     var b = this.$ip + "/api/adm/stu/findPage?pagenum=" + parseFloat(pagenum) + "&lines=" + parseFloat(lines);
        //     this.$axios.get(b, { headers: { 'Authorization': that.token } }).then(function (resp) {
        //         that.stus = resp.data.data.students;
        //         that.page.total = resp.data.data.total;
        //         that.page.p = that.page.p + a;
        //         console.log(resp.data.data);
        //     });
        // }


    },
    computed: {
        totalPages() {//获取总页数
            // let a = this.page.total / this.page.lines
            // //将小数向上取整返回
            // return Math.ceil(a)
            let n = this.page.total / this.page.lines;
            console.log("未取整页数=" + n);
            n = Math.floor(n);
            let y = this.page.total % this.page.lines;
            console.log("页数=" + n + "    余数=" + y);
            if (y > 0) n = n + 1;
            return n;
        }
    },




    mounted() {
        var that = this
        that.token = window.localStorage.getItem("token")
        var a = this.$ip + "/api/adm/stu/findPage?pagenum=" + that.page.pagenum + "&lines=" + that.page.lines
        this.$axios.get(a, { headers: { 'Authorization': that.token } }).then(function (resp) {
            that.stus = resp.data.data.students
            that.page.total = resp.data.data.total
            console.log(resp.data.data)
        })

    }

}
</script>

<style></style>
